<template>
    <div>
        
        <table class="table" border="1">
            <tr>
                <td>菜谱标题</td>
                <td><input type="text" v-model="info.name"></td>
            </tr>
            <tr>
                <td>分类</td>
                <td>
                    <select v-model="info.type">
                        <option value="0">请选择</option>
                        <option value="早餐">早餐</option>
                        <option value="午餐">午餐</option>
                        <option value="晚餐">晚餐</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="UpLoadFile">
                    <img :src="info.img" style="width: 100px;height: 100px;">
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td><input type="date" v-model="info.date"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="添加" @click="add"></td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">
    import {ref} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();

const info=ref({
  "id": 0,
  "name": "",
  "type": "0",
  "img": "",
  "date": ""
})

const UpLoadFile=(e:any)=>{
    
    var file = e.target.files[0];
    var fd = new FormData();
    fd.append("img",file);
        axios.post("https://localhost:7041/api/fileUpLoadFile",fd)
    .then(res=>{
        info.value.img = res.data;
        
    })
   

}



const add=()=>{
    if(info.value.name==""){
        alert('名称不能为空');
        return;
    }
    if(info.value.img==""){
        alert('图片不能为空');
        return;
    }
    if(info.value.type=="0"){
        alert('类别不能为空');
        return;
    }
    if(info.value.date==""){
        alert('日期不能为空');
        return;
    }
    axios.post("https://localhost:7041/api/sp/AddSp",info.value).then(res=>{
    if(res.data>0){
        alert('添加成功')
        router.push('spshow');
    }
    else{
        alert('添加失败')
    }
})
}







</script>

